<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort-4</title>
    <style>
        .assigned{
            border:0;
            background:transparent;
            width:100px;
            height:100px;
            overflow-y:auto;
            vertical-align:bottom;
        }
        .div-select{
            position:absolute;
            border:1px solid #000;
            width: auto;
            height: 15px;
            padding: 0;
            margin: 0;
            font-size:13px;
            display: none;
        }
        .option{
            text-align: center;
        }
        .none-select{
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            padding-top:-1px;
            padding-left:1px;
            vertical-align:top;
            background: no-repeat scroll center right transparent;
            font-size: 9px;
            display: none;
        }
    </style>
</head>
<body>
<table border="1px" cellspacing="0">
    <tr>
        <td >
            <select id="unAssigned" class="assigned" multiple size="7">
                <option value="se">SE</option>
                <option value="tl">TL</option>
                <option value="qc">QC</option>
                <option value="pg">PG</option>
                <option value="pg">PG</option>
                <option value="pg">PG</option>
            </select>
        </td>
        <td >
            <button id="left2right"> >>> </button><br>
            <button id="right2left"> <<< </button>
        </td>
        <td style="border:none;">
            <select id="assigned" class="assigned" multiple size="7">
            </select>
        </td>
        <td style="border:none;">
            <table  cellspacing="0" style="width:35px" >
                <tr>
                    <td>
                        <div id="div1" class="div-select" style="top:11px;">
                            <select id="sort1" class="none-select">
                                <option value="asc" class="option">升序</option>
                                <option value="desc" class="option">降序</option>
                            </select>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="div2" class="div-select" style="top:28px;">
                            <select id="sort2" class="none-select">
                                <option value="asc" class="option">升序</option>
                                <option value="desc" class="option">降序</option>
                            </select>
                        </div>
                    </td>
                </tr><tr>
                <td>
                    <div id="div3" class="div-select" style="top:45px;">
                        <select id="sort3" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div4" class="div-select" style="top:62px;">
                        <select id="sort4" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div5" class="div-select" style="top:79px;">
                        <select id="sort5" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div6" class="div-select" style="top:96px;">
                        <select id="sort6" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr>
            </table>
        </td>
    </tr>
</table>


<script src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#assigned").empty();

        $("#left2right").click(function () {  //列表元素向右移动
            let opts = $("#unAssigned :selected");
            if (opts.length == 0) {
                alert("请选择要分配的角色信息");
            } else {
                $("#assigned").append(opts);

            }
        });

        $("#right2left").click(function () { //列表元素向左移动
            let opts = $("#assigned :selected");//#assigned :selected"中间的空格不能删掉
            //let opts = $("#assigned option:selected");//方式二
            if (opts.length == 0) {
                alert("请选择要撤消的角色信息");
            } else {
                $("#unAssigned").append(opts);
            }
        });
    });
</script>
</body>
</html>
